﻿@page "/tab"

<div class="container-fluid">

    <MatTabGroup>
        <MatTab Label="First">
            First Content
        </MatTab>
        <MatTab Label="Second">
            Second Content
        </MatTab>
        <MatTab>
            <LabelContent>
                Third <MatIcon Icon="@MatIconNames.Close"></MatIcon>
            </LabelContent>
            <ChildContent>
                Third Content
            </ChildContent>
        </MatTab>

    </MatTabGroup>

    <hr />
    <h2>Dynamic tabs and close button</h2>
    <MatTabGroup>
        @foreach (var tab in tabs)
        {
            <MatTab>
                <LabelContent>
                    @tab.Label <MatIconButton Icon="@MatIconNames.Close" OnClick="@(_ => CloseTab(tab))"></MatIconButton>
                </LabelContent>
                <ChildContent>
                    @tab.Content
                </ChildContent>
            </MatTab>
        }
    </MatTabGroup>
    <hr />
    <h2>
        Dynamically set tab index
    </h2>
    <MatButton OnClick="@ChangeTab">Change Tab</MatButton>
    <div>
        Active tab index: @tabIndex
    </div>
    <MatTabGroup @bind-ActiveIndex="@tabIndex">
        <MatTab Label="First">
            First Content
        </MatTab>
        <MatTab Label="Second">
            Second Content
        </MatTab>
        <MatTab Label="Third">
            Third Content
        </MatTab>
        <MatTab Label="Fourth">
            Fourth Content
        </MatTab>

    </MatTabGroup>

</div>

@code
        {

    List<TabItem> tabs = new List<TabItem>()
{
                new TabItem()
                {
                    Label = "Tab 1",
                    Content = @<div>Content 1</div>
                },
                new TabItem()
                {
                    Label = "Tab 2",
                    Content = @<div>Content 2</div>
                },
                new TabItem()
                {
                    Label = "Tab 3",
                    Content = @<div>Content 3</div>
                },
                new TabItem()
                {
                    Label = "Tab 4",
                    Content = @<div>Content 4</div>
                },
                new TabItem()
                {
                    Label = "Tab 5",
                    Content = @<div>Content 5</div>
                },
            };

        void CloseTab(TabItem tab)
        {
            tabs.Remove(tab);
        }

        class TabItem
        {
            public string Label { get; set; }
            public RenderFragment Content { get; set; }
        }
        public int tabIndex = 0;

        void ChangeTab(MouseEventArgs e)
        {
            tabIndex = tabIndex < 3 ? tabIndex + 1 : 0;
        }
}